import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Map, Marker, NavigationControl, InfoWindow,MapvglView, MapvglLayer} from 'react-bmapgl';
import url from '@/config/url'
import axios from '@/http/http'
class Index extends Component {
    render() {
        return (
            //   mapType='earth'   地球模式
            <Map center={{lng: 116.402544, lat: 39.928216}} zoom="11" enableScrollWheelZoom={true}  style={{height:'100%'}}>
                <Marker position={{lng: 116.402544, lat: 39.928216}} />
                <NavigationControl /> 
                {/* <InfoWindow position={{lng: 116.402544, lat: 39.928216}} /> */}
                {/* 图层 */}
                <MapvglView effects={['bright']}>
                    <MapvglLayer
                        type="PointLayer"
                        data={this.state.data}
                        options={{
                        blend: 'lighter',
                        size: '6',
                        // color: 'rgb(255, 53, 0, 0.6)',
                        color: 'red',
                        // shape: 'square', // 默认为圆形，可传square改为正方形
                        }}
                    />
                    </MapvglView>
            </Map>
        );
    }
    state = {
        data:[]
    }
    componentDidMount(){
        axios.get(url.cinemaloaction).then(res=>{
            // console.log(res)
            var data = [];
            if(res.data.errNo==0){
                // res.data.paginate.slice(0,50)   截取数组
                res.data.paginate.map(item=>{
                    data.push({
                        geometry: {
                        type: 'Point',
                        coordinates: [item.gpsaddress.split(',')[0], item.gpsaddress.split(',')[1]]
                    }
                    })
            })
                this.setState({
                    data:data
                })
            }

        }).catch(e=>{})
    }
}

export default Index;
